<template>
  <div class="interfaceSet">
    <el-row class="button-flex"
            :gutter="20">
      <el-col :xs="{ span: 24 }"
              :sm="{ span: 4 }"
              :lg="{ span: 4 }"
              :md="{ span: 4 }">
        <el-input v-model="requestParam.project_no"
                  placeholder="请输入项目编号"></el-input>
      </el-col>
      <el-col :xs="{ span: 24 }"
              :sm="{ span: 4 }"
              :lg="{ span: 4 }"
              :md="{ span: 4 }">
        <el-input v-model="requestParam.project_name"
                  placeholder="请输入项目名称"></el-input>
      </el-col>
      <el-col :xs="{ span: 24 }"
              :sm="{ span: 4 }"
              :md="{ span: 4 }"
              :lg="{ span: 4 }">
        <el-select value-key="code"
                   v-model="requestParam.contact_name"
                   placeholder="请选择负责人员"
                   @change="mainSelect">
          <el-option v-if="!selectName"
                     label="请选择负责人员"
                     value="0"> </el-option>
          <el-option v-for="item in selectName"
                     :key="item.project_id"
                     :label="item.contact_name"
                     :value="item.contact_name">
          </el-option>
        </el-select>
      </el-col>
      <el-col class="flex-end"
              :xs="{ span: 24, offset: 0 }"
              :sm="{ span: 12, offset: 0 }"
              :md="{ span: 12, offset: 0 }"
              :lg="{ span: 12, offset: 0 }">
        <el-button icon="el-icon-search"
                   @click="getInformList"
                   type="primary">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row class="informSet-mid">
      <el-col :span="24"
              class="table-col">
        <el-table :highlight-current-row="true"
                  border
                  :header-cell-style="{ background: '#f5f5f5' }"
                  :data="informSetList.list">
          <el-table-column type="index"
                           label="序号"
                           sortable
                           align="center"
                           :sort-method="sortNo"
                           width="100"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="project_no"
                           label="项目编号"
                           sortable
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="项目简称"
                           prop="nick_name"
                           align="center">
          </el-table-column>
          <el-table-column label="项目名称"
                           show-overflow-tooltip
                           prop="project_name"
                           align="center">
          </el-table-column>
          <el-table-column label="项目地址"
                           show-overflow-tooltip
                           prop="addr"
                           align="center">
          </el-table-column>
          <el-table-column label="负责人"
                           prop="contact_name"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="负责人手机号"
                           show-overflow-tooltip
                           prop="contact_phone"
                           align="center">
          </el-table-column>
          <el-table-column label="操作"
                           width="200px"
                           align="center">
            <template slot-scope="scope">
              <el-button @click="setUserInform(scope.row)"
                         type="text">设置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24"
                style="margin-top:20px!important;">
          <el-pagination @current-change="handlePageChange"
                         @size-change="handleSizeChange"
                         :current-page="requestParam.page"
                         :page-size="requestParam.page_size"
                         layout="total,sizes,prev, pager, next, jumper"
                         background
                         :total="informSetList.total_count"
                         align="center">
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
    <!-- 设置 -->
    <el-dialog :visible.sync="setInterfaceDialog"
               @close="dialogClose"
               title="设置">
      <el-form ref="form"
               :rules="messageRules"
               :model="setMessageform"
               label-width="auto">
        <el-form-item label="负责人"
                      prop="contact_name">
          <el-input v-model="setMessageform.contact_name"
                    placeholder="请输入负责人"></el-input>
        </el-form-item>
        <el-form-item label="负责人手机号"
                      prop="contact_phone">
          <el-input v-model="setMessageform.contact_phone"
                    placeholder="请输入负责人手机号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="InterfaceDialog">取 消</el-button>
        <el-button @click="setMessage"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 我的权限页面 -->
    <el-button @click="mylimit">我的权限</el-button>

  </div>
</template>
<script>
import { InformSetApi } from "@/services/ProjectCenter";

export default {
  data () {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入负责人手机号'))
      } {
        const phoneRegex = /^1[0-9]\d{9}$/
        if (!phoneRegex.test(value)) {
          callback(new Error('手机号码格式不正确'))
        } else {
          callback()
        }
      }
    };
    return {
      messageRules: {
        contact_name: [{ required: true, message: '请输入负责人', trigger: 'change' }],
        contact_phone: [{ required: true, validator: validatePhone, trigger: 'change' }],
      },
      project_id: '',
      setInterfaceDialog: false,
      requestParam: {
        project_no: '',
        project_name: '',
        contact_name: '',
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      resetParam: {
        project_no: '',
        project_name: '',
        contact_name: '',
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      informSetList: {
        list: [],
        total: 0,
        total_count: 0
      },
      setMessageform: {
        contact_name: '',
        contact_phone: '',
        project_id: ''
      },
      selectName: [],
    }
  },
  watch: {
    '$store.state.choosedProject': function (val) {
      this.choosedProject = val
      this.project_id = val.project_id
      this.requestParam.page = 1
    }
  },
  created () {
    this.getInformList()

    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    this.choosedProject = store.project_id ? store : JSON.parse(local)
    this.project_id = this.choosedProject.project_id
  },
  computed: {
  },
  methods: {
    //我的权限页面,之后要删掉的
    mylimit () {
      this.$router.push({ path: './MyLimit' })
    },
    dialogClose () {
      this.$refs.form.resetFields()
    },
    setUserInform (row) {
      this.setMessageform = {
        contact_name: row.contact_name,
        contact_phone: row.contact_phone,
        project_id: row.project_id
      }
      this.setInterfaceDialog = true
    },
    //获取通知信息
    getInformList () {
      InformSetApi.getInformList({
        params: this.requestParam
      }).then(
        res => {
          // console.log(res, 222);
          if (res.code === 0) {
            this.informSetList = res.data;
            let selectArr = res.data.list.filter(item => item.contact_name)
            this.selectName = selectArr
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    //当前页
    handlePageChange (page) {
      // console.log(`当前页: ${page}`);
      this.requestParam.page = page;
      this.getInformList();
    },
    //每页条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.requestParam.page_size = val;
      this.getInformList();
    },
    // 表格排序
    sortNo () { },
    //接口信息设置弹窗
    setMessage () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          InformSetApi.setInform({
            params: this.setMessageform
          }).then(
            res => {
              if (res.code === 0) {
                this.$message({
                  message: '设置成功',
                  type: 'success'
                });
                this.getInformList()
                this.setInterfaceDialog = false
              }
            },
            err => {
              console.log(err);
            }
          );
        } else {
          return false;
        }
      })
    },
    InterfaceDialog () {
      this.setInterfaceDialog = false
      this.$refs.form.resetFields()
    },
    //接口信息选择器
    mainSelect (val) {
      // console.log(val);
      this.requestParam.contact_name = val
    },
    //接口信息重置
    reset () {
      let resetParam = JSON.parse(JSON.stringify(this.resetParam));
      this.requestParam = Object.assign(this.requestParam, resetParam);
      this.getInformList();
    },
  },
}
</script>
<style lang="scss" scoped>
.interfaceSet {
  padding: 30px;
  .informSet-mid {
    padding: 20px;
  }
}
</style>
